<template>
  <div class="checkpass" :style="'height:' + fullHeight + 'px;'">
    <el-card>
      <h1 class="title">get back password</h1>
      <el-form v-model="checkform">
        <el-form-item label="用户名">
          <el-input
            placeholder="用户名"
            v-model="checkform.username"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input
            placeholder="xxx@qq.com"
            v-model="checkform.email"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            placeholder="请输入6位验证码"
            style="width: 335px"
            v-model="checkform.checkcode"
            @input="checkcode"
          >
          </el-input>
          <el-button type="primary" class="getcheck" @click="getcheck"
            >点击获取</el-button
          >
        </el-form-item>
        <el-form-item label="密码">
          <el-input placeholder="密码" v-model="checkform.password" type="password" show-password></el-input>
        </el-form-item>
        <el-form-item label="确认密码">
          <el-input
            placeholder="再次输入密码"
            v-model="checkform.confirmpassword"
            type="password"
            show-password
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            class="check"
            @click="checkpass"
            type="success"
            :disabled="disabeled"
            >修改密码</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "forgetpass",
  data() {
    return {
      fullHeight: document.documentElement.clientHeight,
      checkform: {},
      disabeled: true
    };
  },
  methods: {
    //适应整屏
    get_bodyHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },
    //获取验证码
    async getcheck() {
      const { data: res } = await this.$axios.post(
        this.$api.forgetpass.getCheckCode,
        {
          adminUsername: this.checkform.username,
          adminEmail: this.checkform.email
        },
        {
          headers: {
            "Content-Type": "application/json"
          }
        }
      );
      console.log(res);
      if (res.code != "200") {
        this.$message(res.msg)
        return false;
      }
      console.log(res);
    },
    //验证验证码
    async checkcode() {
      const { data: res } = await this.$axios.post(
        this.$api.forgetpass.checkCode,
        { adminCode: this.checkform.checkcode }
      );
      if (res.code != "200") {
        return false;
      }
      console.log(res);
      this.disabeled = false;
    },
    //修改密码
    checkpass() {
      this.$axios.post(
        this.$api.forgetpass.updatePassword,
        {adminUsername:this.checkform.username,adminPassword:this.checkform.password,adminPassword1:this.checkform.confirmpassword},
        { headers: { "Content-Type": "application/json" } }
      ).then(res=>{
        if(res.data.code==="200"){
          console.log(res)
          this.$message({type:"success",message:res.data.msg})
        }
      }).catch(err=>{
        console.log(err)
      });
    }
  },
  watch: {
    //监控浏览器高度变化
    fullHeight(val) {
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          that.timer = false;
        }, 400);
      }
    }
  },
  mounted() {
    this.get_bodyHeight();
  }
};
</script>

<style scoped>
@import url("../assets/fonts/font.css");
.checkpass {
  background: url("../assets/loginBackIMG2.png");
}
/deep/ .title{
  font-family: "tarjan";
  color: white;
}
.el-card {
  width: 500px;
  margin: 0 auto;
  background-color: rgba(0,0,0,.4);
  border: none;
  position: relative;
  top: 20px;
}

.getcheck {
  margin: 12px;
}

.check {
  float: right;
}
/deep/ .el-form-item__label{
  color: white;
}
</style>
